<template>
    <div>
    <el-row justify="end">
        <el-col style="text-align: end;" class="mb-10px">
            <el-input v-model="content" style="width: 300px;" clearable placeholder="搜索">
                <template #prefix>
                    <Icon icon="ep:search" />
                </template>
            </el-input>
        </el-col>
        <el-col>
            <el-table v-loading="loading" :data="list" ref="tableRef"  header-cell-class-name="custom-header" stripe>
                <el-table-column label="发送时间" align="center" prop="createTime" width="300" :show-overflow-tooltip="true" />
                <el-table-column label="内容" align="center" prop="content"/>
                <el-table-column label="关联地震" align="center" prop="name" :show-overflow-tooltip="true"
                    width="350" />
                <el-table-column align="center" label="状态" prop="pslStatus">
                    <template #default="scope">
                    <el-tag  effect="dark" :type="scope.row.pslStatus=='1'?'success':'danger'">{{ scope.row.pslStatus=='1'?'成功':'失败' }}</el-tag>
                    </template>
            </el-table-column>
            </el-table>
            <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
                @pagination="getList" />
        </el-col>
    </el-row>
</div>
</template>

<script lang="ts" setup>
import { getMessageLogList } from '@/api/infoArrive/arriveNotice/messageLog'
import { DICT_TYPE } from '@/utils/dict'
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    pslType:'7'
})

/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await getMessageLogList({ ...queryParams as any ,content:content.value})
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

const content = ref('')
/** content */
watch(content, () => {
    queryParams.pageNo = 1;
    getList()
})

onMounted(()=>{
    getList()
})
defineExpose({ getList })
</script>


<style scoped>
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>
